﻿<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" Inherits="iLikeUSC._Default" Codebehind="Default.aspx.cs" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/jquerycolorbox.js" type="text/javascript"></script>
    <link href="Styles/Site.css" type="text/css" rel=Stylesheet media="screen" />
    <link href="Styles/colorbox.css" type="text/css" rel=Stylesheet media="screen" />
</head>
<body>
    <div id="fb-root"></div>
    <script type="text/javascript">
    // Load the SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    } (document));

    window.fbAsyncInit = function () {

        FB.init({
            appId: '456682621012249', // App ID
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            oauth: true, // enable OAuth 2.0 authentication
            channel: '/channel.htm', //
            xfbml: true  // parse XFBML
        });

        // Additional initialization code here
        FB.Event.subscribe('auth.authResponseChange', function (response) {
            if (response.status === 'connected') {
                $('#connect').remove();
                var accessToken = response.authResponse.accessToken;
                var userId = response.authResponse.userID;

                FB.api('/me/accounts', function (response) {
                    for (var i = 0; i < response.data.length; i++) {
                        if (response.data[i].id == '456682621012249') {
                            var adminControl = '<%= adminHide.ClientID %>';
                            document.getElementById(adminControl).value = "true";
                        }
                    }
                });
                var hiddenControl = '<%= inpHide.ClientID %>';
                document.getElementById(hiddenControl).value = userId;
                $(".vote").show();
            }
            else { }
        });
        FB.Canvas.setAutoGrow(true);
    };

    function postShare(img) {
        var obj = {
            method: 'feed',
            name: 'Why iLike USC',
            picture: img,
            link: 'http://www.facebook.com/unisunshinecoast/app_456682621012249',
            description: 'Be creative and tell us what you like best about USC and the Sunshine Coast using words, images or videos. Enter for you chance to win an iPad2, iPod Touch or $100 gift voucher.'
        };
        FB.ui(obj);
    }

    jQuery.fn.limitMaxlength = function (options) {

        var settings = jQuery.extend({
            attribute: "maxlength",
            onLimit: function () { },
            onEdit: function () { }
        }, options);

        // Event handler to limit the textarea
        var onEdit = function () {
            var textarea = jQuery(this);
            var maxlength = parseInt(textarea.attr(settings.attribute));

            if (textarea.val().length > maxlength) {
                textarea.val(textarea.val().substr(0, maxlength));

                // Call the onlimit handler within the scope of the textarea
                jQuery.proxy(settings.onLimit, this)();
            }

            // Call the onEdit handler within the scope of the textarea
            jQuery.proxy(settings.onEdit, this)(maxlength - textarea.val().length);
        }

        this.each(onEdit);

        return this.keyup(onEdit)
				.keydown(onEdit)
				.focus(onEdit)
				.live('input paste', onEdit);
    }


    $(document).ready(function () {

        $(".vote").hide();

        var onEditCallback = function (remaining) {
            $(this).siblings('.charsRemaining').text("Characters remaining: " + remaining);

            if (remaining > 0) {
                $(this).css('background-color', 'white');
            }
        }

        var onLimitCallback = function () {
            $(this).css('background-color', 'red');
        }

        $('textarea[maxlength]').limitMaxlength({
            onEdit: onEditCallback,
            onLimit: onLimitCallback
        });



        $("a.popup").live("click", function () {
            var caption = this.title;
            var image = this.href;
            FB.Canvas.getPageInfo(function (fbCanvasInfoObject) {
                var fbPosition = fbCanvasInfoObject.scrollTop;
                $.colorbox({ href: image, title: caption, fbScrollTop: fbPosition });
            });
            return false;
        });

        $("a.popupVideo").live("click", function () {
            var target = this.href;
            FB.Canvas.getPageInfo(function (fbCanvasInfoObject) {
                var fbPosition = fbCanvasInfoObject.scrollTop;
                $.colorbox({ iframe: true, innerWidth: 500, innerHeight: 350, href: target, fbScrollTop: fbPosition });
            });
            return false;
        });



        $('img.entryImage').each(function () {
            $(this).load(function () {
                var maxWidth = 140; // Max width for the image
                var maxHeight = 140;   // Max height for the image
                $(this).css("width", "auto").css("height", "auto"); // Remove existing CSS
                $(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes
                var width = $(this).width();    // Current image width
                var height = $(this).height();  // Current image height

                if (width < height) {
                    // Check if the current width is larger than the max
                    if (width > maxWidth) {
                        var ratio = maxWidth / width;   // get ratio for scaling image
                        $(this).css("width", maxWidth); // Set new width
                        $(this).css("height", height * ratio);  // Scale height based on ratio
                        height = height * ratio;    // Reset height to match scaled image
                    }
                } else if (width > height) {
                    // Check if current height is larger than max
                    if (height > maxHeight) {
                        var ratio = maxHeight / height; // get ratio for scaling image
                        $(this).css("height", maxHeight);   // Set new height
                        $(this).css("width", width * ratio);    // Scale width based on ratio
                        width = width * ratio;  // Reset width to match scaled image
                    }
                }

                // Centre images horiz and vert
                if ($(this).height() != 140) {
                    var topMargin = (maxHeight - height) / 2;
                    $(this).css("margin-top", topMargin);
                }

                if ($(this).width() != 140) {
                    var leftMargin = (maxWidth - width) / 2;
                    $(this).css("margin-left", leftMargin);
                }

            });
        });

    });

</script>
    <div id="intro">
        <img src="lib/app-banner.png" />
        <!--div id="shareApp">
            <a href="#" onclick="postShare(null);">SHARE</a></div-->
        <p>Get creative and tell us what you like best about USC and the Sunshine Coast using words, images or videos.</p>
        <p>Simply submit your statement, image or video between Monday 23 July and Friday 24 August. If you're submitting an image or a video you'll need to add a caption of 140 characters or less. A finalist will be selected each week (5 in total).</p>
        <p>Voting runs from Monday 27 August until Sunday 2 September, with the finalist with the most votes when voting closes taking home the major prize. To be eligible for prizes, you must be a currently enrolled USC student.</p>
        <p>Full terms and conditions are available from the <a href="http://www.usc.edu.au/ilikeusc" target=_blank>USC website</a>.</p>
    </div>
    <div id="finalists">
        <p id='connect'>To vote you need to <a href="#" onclick="FB.login(function(response){});">grant this app permission</a> to access your Facebook data - it uses your Facebook user ID to prevent multiple voting on single entries. Voting opens on Monday 27 August.</p>    
        <asp:Repeater ID="finalistsRepeater" runat="server">
            <HeaderTemplate>
                <img src="lib/finalists.png" />
            </HeaderTemplate>
            <ItemTemplate>
                <div class="finalistWrapper">
                    <h3>Week <%# Container.ItemIndex + 1 %></h3>
                    <%# string.Format("<span class='voteCount'>VOTES: {0}</span>", Eval("Votes")) %>
                    <div class="entryHolder <%#Eval("Type") %> <%# Container.ItemIndex+1 == 4 ? string.Format("{0}", "winner") : "" %>" id="div-<%#Eval("EntryID") %>">                
                        <%# (!String.IsNullOrEmpty(Eval("Filename").ToString()) && Eval("Type").ToString() == "image")
                            ? string.Format("<a class='popup' href='https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}' title=\"{1} (Submitted by {2})\"><img class='entryImage' src='https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}'/></a>", Eval("Filename"), Eval("Caption"), Eval("Name")) 
                            : (!String.IsNullOrEmpty(Eval("Filename").ToString()) && Eval("Type").ToString() == "video")
                            ? string.Format("<a class='popupVideo' href='{0}' title=\"{1} (Submitted by {2})\"><img class='entryImage' src='/play.png'/></a>", Eval("Filename"), Eval("Caption"), Eval("Name"))
                            : string.Format("<p>{0}</p>", Eval("Caption")) %>
                        <span class="entrantName">By: <%#Eval("Name") %></span>
                        <%# string.Format("<a href='#' onclick=\"postShare('https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}');\" class='share'>SHARE</a>", Eval("Filename"))%>
                        
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>
        <p id="finalistText" runat="server"></p>
    </div>            
    <div id="submit" runat="server">    
        <form id="Form1" enctype="multipart/form-data" runat="server">
            <!--img src="lib/submit.png" /-->
            <input id="inpHide" type="hidden" runat="server" />
            <input id="adminHide" type="hidden" runat="server" />
            <!--<fieldset id="pt1">
		        <legend><span>Step </span>1.<span>: Select file</span></legend>
		            <h3>Add a file to your entry.</h3>
		            <div class="help">File can be a photo or video (4MB maximum). No file? No problem - complete step 2 for a text-only entry (140 character maximum).</div>
		        <div class="fileinputs">
                    <label for="filename">Select your file: </label>
                    <input type="file" id="filename" runat="server" />
                </div>
	        </fieldset>
            <fieldset id="pt2">
		        <legend><span>Step </span>2.<span>: Add a caption</span></legend>
		            <h3>Add a caption to your entry.</h3>
		            <div class="help">Tell us how your image/video illustrates what you like about USC, or add your text-only entry.</div>
                <label for="textEntry">Caption: </label>
                <textarea id="textEntry" runat="server" maxlength="140" width="240" />
                <p class="charsRemaining">
	        </fieldset>
            <fieldset id="pt3">
		        <legend><span>Step </span>3.<span>: Enter your details</span></legend>
		            <h3>Enter your details.</h3>
		            <div class="help">We need your name and email to verify that you are a current USC student, and eligible for prizes.</div>
                <label for="entrantName">Your name: </label>
                <input type="text" id="entrantName" runat="server" /><br />
                <label for="email">Your email: </label>
                <input type="text" id="emailAddress" runat="server" /><br />
	        </fieldset>
            <p id="status" runat="server"></p>
            <fieldset id="pt4">
		            <legend>Step 4: Submit form</legend>
		            <h3>Terms of Service</h3>
		            <div id="disclaimer">By clicking the “Submit entry” button you acknowledge you have read and accepted the terms and conditions available from the <a href="http://www.usc.edu.au/ilikeusc" target=_blank>USC website.</a></div>
		            <input type="button" id="uploadBtn" OnServerClick="uploadBtn_Click" runat="server" value="Submit entry »">
            </fieldset>-->
        </form>
    </div>
    <div id="entries">        
        <img src="lib/entries.png" />

        <asp:Repeater ID="entryRepeaterWk5" runat="server">
            <HeaderTemplate><h2>Week 5</h2></HeaderTemplate>                
            <ItemTemplate>
                <div class="entryHolder <%#Eval("Type") %>" id="div-<%#Eval("EntryID") %>">                            
                    <%# (!String.IsNullOrEmpty(Eval("Filename").ToString()) && Eval("Type").ToString() == "image")
                        ? string.Format("<a class='popup' href='https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}' title=\"{1} (Submitted by {2})\"><img class='entryImage' src='https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}'/></a>", Eval("Filename"), Eval("Caption"), Eval("Name")) 
                        : (!String.IsNullOrEmpty(Eval("Filename").ToString()) && Eval("Type").ToString() == "video")
                        ? string.Format("<a class='popupVideo' href='{0}' title=\"{1} (Submitted by {2})\"><img class='entryImage' src='/play.png'/></a>", Eval("Filename"), Eval("Caption"), Eval("Name"))
                        : string.Format("<p>{0}</p>", Eval("Caption")) %>
                    <span class="entrantName">By: <%#Eval("Name") %></span>
                    <%# string.Format("<a href='#' onclick=\"postShare('https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}');\" class='share'>SHARE</a>", Eval("Filename"))%>                   
                </div>
            </ItemTemplate>
        </asp:Repeater>
        
        <asp:Repeater ID="entryRepeaterWk4" runat="server">
            <HeaderTemplate><h2>Week 4</h2></HeaderTemplate>                
            <ItemTemplate>
                <div class="entryHolder <%#Eval("Type") %>" id="div-<%#Eval("EntryID") %>">                            
                    <%# (!String.IsNullOrEmpty(Eval("Filename").ToString()) && Eval("Type").ToString() == "image")
                        ? string.Format("<a class='popup' href='https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}' title=\"{1} (Submitted by {2})\"><img class='entryImage' src='https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}'/></a>", Eval("Filename"), Eval("Caption"), Eval("Name")) 
                        : (!String.IsNullOrEmpty(Eval("Filename").ToString()) && Eval("Type").ToString() == "video")
                        ? string.Format("<a class='popupVideo' href='{0}' title=\"{1} (Submitted by {2})\"><img class='entryImage' src='/play.png'/></a>", Eval("Filename"), Eval("Caption"), Eval("Name"))
                        : string.Format("<p>{0}</p>", Eval("Caption")) %>
                    <span class="entrantName">By: <%#Eval("Name") %></span>
                    <%# string.Format("<a href='#' onclick=\"postShare('https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}');\" class='share'>SHARE</a>", Eval("Filename"))%>                   
                </div>
            </ItemTemplate>
        </asp:Repeater>        
        
        <asp:Repeater ID="entryRepeaterWk3" runat="server">
            <HeaderTemplate><h2>Week 3</h2></HeaderTemplate>                
            <ItemTemplate>
                <div class="entryHolder <%#Eval("Type") %>" id="div-<%#Eval("EntryID") %>">                            
                    <%# (!String.IsNullOrEmpty(Eval("Filename").ToString()) && Eval("Type").ToString() == "image")
                        ? string.Format("<a class='popup' href='https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}' title=\"{1} (Submitted by {2})\"><img class='entryImage' src='https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}'/></a>", Eval("Filename"), Eval("Caption"), Eval("Name")) 
                        : (!String.IsNullOrEmpty(Eval("Filename").ToString()) && Eval("Type").ToString() == "video")
                        ? string.Format("<a class='popupVideo' href='{0}' title=\"{1} (Submitted by {2})\"><img class='entryImage' src='/play.png'/></a>", Eval("Filename"), Eval("Caption"), Eval("Name"))
                        : string.Format("<p>{0}</p>", Eval("Caption")) %>
                    <span class="entrantName">By: <%#Eval("Name") %></span>
                    <%# string.Format("<a href='#' onclick=\"postShare('https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}');\" class='share'>SHARE</a>", Eval("Filename"))%>                   
                </div>
            </ItemTemplate>
        </asp:Repeater>

        <asp:Repeater ID="entryRepeaterWk2" runat="server">
            <HeaderTemplate><h2>Week 2</h2></HeaderTemplate>                
            <ItemTemplate>
                <div class="entryHolder <%#Eval("Type") %>" id="div-<%#Eval("EntryID") %>">                            
                    <%# (!String.IsNullOrEmpty(Eval("Filename").ToString()) && Eval("Type").ToString() == "image")
                        ? string.Format("<a class='popup' href='https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}' title=\"{1} (Submitted by {2})\"><img class='entryImage' src='https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}'/></a>", Eval("Filename"), Eval("Caption"), Eval("Name")) 
                        : (!String.IsNullOrEmpty(Eval("Filename").ToString()) && Eval("Type").ToString() == "video")
                        ? string.Format("<a class='popupVideo' href='{0}' title=\"{1} (Submitted by {2})\"><img class='entryImage' src='/play.png'/></a>", Eval("Filename"), Eval("Caption"), Eval("Name"))
                        : string.Format("<p>{0}</p>", Eval("Caption")) %>
                    <span class="entrantName">By: <%#Eval("Name") %></span>
                    <%# string.Format("<a href='#' onclick=\"postShare('https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}');\" class='share'>SHARE</a>", Eval("Filename"))%>                   
                </div>
            </ItemTemplate>
        </asp:Repeater>
        
        <asp:Repeater ID="entryRepeater" runat="server">
            <HeaderTemplate><h2>Week 1</h2></HeaderTemplate>                
            <ItemTemplate>
                <div class="entryHolder <%#Eval("Type") %>" id="div-<%#Eval("EntryID") %>">                            
                    <%# (!String.IsNullOrEmpty(Eval("Filename").ToString()) && Eval("Type").ToString() == "image")
                        ? string.Format("<a class='popup' href='https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}' title=\"{1} (Submitted by {2})\"><img class='entryImage' src='https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}'/></a>", Eval("Filename"), Eval("Caption"), Eval("Name")) 
                        : (!String.IsNullOrEmpty(Eval("Filename").ToString()) && Eval("Type").ToString() == "video")
                        ? string.Format("<a class='popupVideo' href='{0}' title=\"{1} (Submitted by {2})\"><img class='entryImage' src='/play.png'/></a>", Eval("Filename"), Eval("Caption"), Eval("Name"))
                        : string.Format("<p>{0}</p>", Eval("Caption")) %>
                    <span class="entrantName">By: <%#Eval("Name") %></span>
                    <%# string.Format("<a href='#' onclick=\"postShare('https://s3-ap-southeast-1.amazonaws.com/ilikeusc-resources/images/{0}');\" class='share'>SHARE</a>", Eval("Filename"))%>                   
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>


</body>
</html>